@import '../../../../style/color.scss';
@import '../../../../style/font.scss';
@import "../../../../style/mixin.scss";

.analyze-page-container {
  .ant-form {
    .ant-form-item {
      width: 260px;
      height: 40px;
      margin: 0;

      .ant-calendar-picker {
        .ant-calendar-picker-input {
          width: 260px;
          color: $form-input-color;

          &::placeholder {
            color: $form-input-placeholder;
          }
        }
      }
    }

    .label {
      display: inline-block;
      color: $normal-font-color;
      font-family: $regular-font-family;
      font-size: 18px;
      line-height: 40px;
      margin-left: 30px;
    }

    .search-btn {
      float: right;
      margin-left: 30px;
      vertical-align: top;

      img {
        margin-right: 12px;
      }
    }
  }

  .charts-container {
    overflow: hidden;
    padding: 0 0 20px;


    .chart-item {
      vertical-align: bottom;
      display: inline-block;
      height: 548px;
      background: url("./../../../../../images/page/analyze_bg.png") no-repeat ;
      background-size: 100% 100% ;
      margin-top: 100px;


      &:not(:first-child) {
        margin-left: 20px;
      }

      .img-wrap {
        width: 480px;
        height: 366px;
        text-align: center;
      }


      img {
        height: 366px;
        margin: auto;
      }


      .title {
        font-family: $medium-font-family;
        font-size: 24px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-shadow: 0 0 4px rgba(255,255,255,0.50);
        text-align: center;
        position: relative;
        top: -20px;
      }


      .chart-wrap {
        width: 80%;
        height: 480px;
        margin: auto;
        position: relative;

        .test-item {
          color: #fff;
          white-space: nowrap;
        }

        .check-num {
          font-family: $regular-font-family;
          font-size: 20px;
          color: $big-data-check-num-color;
          letter-spacing: 0;
          text-shadow: 0 0 4px $big-data-check-num-shadoe-color;
          padding-left: 10px;
        }
      }
    }

    .label-wrap {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      text-align: center;

      .square {
        display: inline-block;
        margin-right: 10px;
        color: #FFFFFF;

        span {
          display: inline-block;
          width: 15px;
          height: 15px;
          margin-right: 5px;
          vertical-align: -10%;
        }
      }

    }

   /* .square {
      position: absolute;
      color: #FFFFFF;
      bottom: 15px;
      left: 0;
      right: 0;
      text-align: center;
      margin-right: 10px;


    }*/

    .posi1 {
     // left: 20px;
    }
    .posi2 {
     // left: 50px;
    }
    .posi3{
     // left: 80px;
    }
    .posi4 {
     // left: 120px;
    }
  }
}
